<template>
  <div class="share_content" :class="{ show: isShow }" @touchmove.prevent>
    <!-- 分享弹窗 -->
    <nut-overlay v-model:visible="isShow" :close-on-click-overlay="false">
      <div class="share_main">
        <ImgT src="/imgs/me/share_top.webp" class="top_img" alt="" :lazy="false" />
        <div class="share_img">
          <div class="share_title">
            {{ t("home_page_share_app") }}
            <div class="sub_title">
              <div>Share</div>
              <div>App</div>
            </div>
          </div>
          <div class="qr_code_wrap">
            <vue-qr id="qrid" backgroundColor="#32315C" colorLight="#32315C" colorDark="#ffffff"
              text="http://43.199.35.53:8088/index.html" :size="600" :margin="50" :logoMargin="2"
              logoSrc="/imgs/me/logo-share.png" class="qr_code"></vue-qr>
          </div>

          <!-- <ImgT src="/imgs/me/mask.webp" class="mask_img" alt="" /> -->
          <div class="share_bottom">
            <nut-button class="save" @click="toSave">{{ t("save_image") }}</nut-button>
            <nut-button class="copy" :style="{ width: lang === 'vi-VN' ? '156px' : '147px' }" @click="copyClick">{{ t("copy_link")
              }}</nut-button>
          </div>
          <ImgT src="/imgs/me/close.webp" @click="isShow = false" v-shrink-on-click class="close" alt="" />
        </div>
      </div>
    </nut-overlay>
    <Toast v-model:visible="showToast">{{ t(toast_value) }}</Toast>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import vueQr from "vue-qr/src/packages/vue-qr.vue";
import { copyFn } from "@/utils/publicMethods";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const lang = useI18n().locale;

const toast_value = ref();
const showToast = ref(false);
const props = defineProps({
  visible: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["update:visible", "close"]);
const isShow = computed({
  get: function () {
    return props.visible;
  },
  set: function (value) {
    emit("update:visible", value);
  },
});

// 复制
const copyClick = () => {
  copyFn("http://43.199.35.53:8088/index.html");
  showToast.value = true;
  toast_value.value = "copy_success";
};

// 前往下载
const toSave = () => {
  let picData = document.getElementById("qrid") as HTMLImageElement; //生成二维码之后其实是个img
  if (picData) {
    let a = document.createElement("a");
    a.href = picData.src;
    a.download = `image.png`;
    a.click();
    setTimeout(() => {
      a.remove();
    }, 1000);
  }
};
</script>

<style lang="scss" scoped>
.share_content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  display: none;

  &.show {
    display: block;
  }
}

.share_main {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 14px;
  transform: translateY(-10%);

  .share_title {
    position: absolute;
    top: -84px;
    left: 20px;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    font-family: "PingFang SC", sans-serif;
    .sub_title {
      font-size: 14px;
      line-height: 14px;
      font-weight: 400;
      padding-top: 2px;
    }
  }

  .top_img {
    width: 100%;
  }

  // background-color: #131232;
}

.share_img {
  position: relative;
  height: 343px;
  width: 100%;
  background: #131232;
  margin-top: -60px;

  .qr_code_wrap {
    position: absolute;
    top: 25px;
    left: 50%;
    z-index: 100;
    border-radius: 12px;
    transform: translateX(-50%);
    border: 1px solid #2e296b;
    padding: 11px;
  }

  .close {
    position: absolute;
    bottom: -41px;
    left: calc(50% - 16px);
    height: 28px;
  }

  // width: 236px;
  // height: 159px;
  // background: url(/imgs/me/mask.webp);
  // background-size: 100% 100%;
  // background-repeat: no-repeat;

  .qr_code {
    border-radius: 12px;
    width: 176px;
    height: 176px;
  }
}

.mask_img {
  width: 236px;
  height: 159px;
  position: absolute;
  bottom: 35px;
  left: 50%;
  right: 0;
  z-index: 10;
  transform: translateX(-50%);
}

.share_bottom {
  position: absolute;
  bottom: 35px;
  display: flex;
  padding: 0 20px;
  gap: 13px;
  font-size: 12px;

  &:deep(.nut-button__wrap) {
    font-size: 13px;
  }

  .save {
    width: 147px;
    height: 44px;
    background: #4b4a6e !important;
    border-radius: 8px;
  }

  .copy {
    width: 147px;
    height: 44px;
    border-radius: 8px;
  }

  :deep(.nut-button) {
    line-height: unset;
  }
}

//.share_bottom {
//     width: 236px;
//     height: 84px;
//     position: absolute;
//     bottom: 35px;
//     left: 50%;
//     right: 0;
//     z-index: 111;
//     background: url(/imgs/me/share_bottom.webp);
//     background-size: 100% 100%;
//     background-repeat: no-repeat;
//     display: flex;
//     justify-content: space-around;
//     transform: translateX(-50%);

//     .action {
//         margin-top: 15px;
//         display: flex;
//         flex-direction: column;
//         align-items: center;
//         justify-content: center;

//         font-size: 11px;
//         color: #ffffff;

//         img {
//             height: 34px;
//         }
//     }
// }

:deep(.nut-popup) {
  background: unset;
}
</style>
